let styles = require('./popup.css')

// 函数接口
interface Ipopup {
  width?: string;//宽
  height?: string;//高
  title?: string;//标题
  pos?: string;//位置
  mask?: boolean;//遮罩
  content?: (content: HTMLElement) => void;//内容
}

// 组件接口
interface Icomponent {
  tempContainer: HTMLElement;
  init: () => void;
  template: () => void;
  handle: () => void;
}

function popup(options: Ipopup) {
  return new Popup(options)
}

class Popup implements Icomponent {
  tempContainer: any;
  mask: any;
  constructor(private settings: Ipopup) {
    this.settings = Object.assign({
      width: '100%',
      height: '100%',
      title: '',
      pos: 'center',
      mask: true,
      content: function () { }
    }, this.settings)
    this.init()
  }

  // 初始化
  init() {
    this.template()
    this.settings.mask && this.createMask()
    this.handle()
    this.contentCallBack()
  }

  // 创建模板
  template() {
    this.tempContainer = document.createElement('div')
    this.tempContainer.style.width = this.settings.width
    this.tempContainer.style.height = this.settings.height
    this.tempContainer.className = styles.popup
    this.tempContainer.innerHTML = `
      <div class="${styles['popup-title']}">
        <h3>${this.settings.title}</h3>
        <i class="iconfont icon-guanbi"></i>
      </div>
      <div class="${styles['popup-content']}">
      </div>
    `
    document.body.appendChild(this.tempContainer)
    switch (this.settings.pos) {
      case 'left':
        this.tempContainer.style.left = 0
        this.tempContainer.style.top = (window.innerHeight - this.tempContainer.offsetHeight) + 'px'
        break;
      case 'right':
        this.tempContainer.style.right = 0
        this.tempContainer.style.top = (window.innerHeight - this.tempContainer.offsetHeight) + 'px'
        break;
      default:
        this.tempContainer.style.left = (window.innerWidth - this.tempContainer.offsetWidth) / 2 + 'px'
        this.tempContainer.style.top = (window.innerHeight - this.tempContainer.offsetHeight) / 2 + 'px'
        break;
    }
  }

  // 事件操作
  handle() {
    var title = this.tempContainer.querySelector(`.${styles['popup-title']}`)
    let popupClose = this.tempContainer.querySelector(`.${styles['popup-title']} i`)
    let maskEle = document.querySelector(`.${styles['mask']}`)

    // 关闭按钮
    popupClose.addEventListener('click', () => {
      document.body.removeChild(this.tempContainer)
      this.settings.mask && document.body.removeChild(this.mask)
    })

    // 点击弹窗外关闭（有遮罩时生效）
    if (this.settings.mask) {
      maskEle.addEventListener('click', () => {
        document.body.removeChild(this.tempContainer)
        document.body.removeChild(this.mask)
      })
    }

    var popupBox = this.tempContainer
    var isDraging = false;//以判断是可以进行拖拽
    var mouseOffsetX = null;//存放鼠标相对于弹出框的位置
    var mouseOffsetY = null;

    //窗口可视区域宽(高)度
    var cwidth = document.documentElement.clientWidth || document.body.clientWidth;
    var cheight = document.documentElement.clientHeight || document.body.clientHeight;

    //弹出框宽(高)度
    var lwidth = popupBox.offsetWidth;
    var lheight = popupBox.offsetHeight;

    //  onresize 事件会在窗口或框架被调整大小时发生。
    window.onresize = function () {
      if (document.compatMode == "CSS1Compat") {
        cwidth = document.documentElement.clientWidth;
        cheight = document.documentElement.clientHeight;
      } else {
        cwidth = document.body.clientWidth;
        cheight = document.body.clientHeight;
      }
      popupBox.style.left = (cwidth - lwidth) / 2 + "px";
      popupBox.style.top = (cheight - lheight) / 2 + "px";
    }

    //鼠标按下事件
    title.onmousedown = function (e: any) {
      // e.stopPropagation();
      var e = e || window.event;
      //鼠标相对于弹出框的位置
      mouseOffsetX = e.pageX - popupBox.offsetLeft;
      // e.pageX 是文档坐标而非窗口坐标
      // offsetLeft 鼠标相对于事件源元素（srcElement）的X,Y坐标
      mouseOffsetY = e.pageY - popupBox.offsetTop;
      //鼠标摁下时为true
      isDraging = true;
    }

    //鼠标移动事件
    document.onmousemove = function (e) {
      // var e = e || window.event;
      //鼠标移动时的坐标
      var newMX = e.pageX;
      var newMY = e.pageY;
      //判断为true时可以拖拽，
      if (isDraging === true) {
        //弹出框的偏移值=当前位置-鼠标到弹出框的距离
        var popupBoxL = newMX - mouseOffsetX;
        var popupBoxT = newMY - mouseOffsetY;
        //如果left top值超过边缘时就让他等于边缘
        if (popupBoxL < 0) {
          popupBoxL = 0;
        } else if (popupBoxL > (cwidth - lwidth)) {
          popupBoxL = cwidth - lwidth;
        }
        if (popupBoxT < 0) {
          popupBoxT = 0;
        } else if (popupBoxT > (cheight - lheight)) {
          popupBoxT = cheight - lheight;
        }
        popupBox.style.left = popupBoxL + "px";
        popupBox.style.top = popupBoxT + "px";
      }
    }
    //鼠标弹起时设置为不可拖拽
    document.onmouseup = function () {
      isDraging = false;
    }
  }

  // 创建遮罩
  createMask() {
    this.mask = document.createElement('div')
    this.mask.className = styles.mask
    console.log(this.mask.className)
    this.mask.style.width = '100%'
    this.mask.style.height = 100 + 'vh'
    document.body.appendChild(this.mask)
  }

  // 添加内容
  contentCallBack() {
    let popupContent = this.tempContainer.querySelector(`.${styles['popup-content']}`)
    this.settings.content(popupContent)
  }
}
export default popup